import { createVNode, h } from "vue";
import { Location } from "@element-plus/icons-vue";
import { ElMenu, ElMenuItem, ElSubMenu, ElIcon } from "element-plus";

export default {
  components: { Location },
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  render() {
    let chldren = this.loop(this.list);

    return h(
      ElMenu,
      {
        class: "el-menu-vertical-demo",
      },
      chldren
    );
  },
  methods: {
    loop(list) {
      // createVNode(type: VNodeTypes | ClassComponent | unique symbol,
      // props?: (Data & VNodeProps) | null | undefined,
      // children?: unknown,
      // patchFlag?: number | undefined,
      // dynamicProps?: string[] | null | undefined,
      // isBlockNode?: boolean | undefined)
      createVNode();

      return list.map((it) => {
        let vNode = !it.children
          ? h(
              ElMenuItem,
              {
                index: it.id,
                onClick: () => {
                  this.$router.push(it.path);
                },
              },
              [it.name]
            )
          : h(
              ElSubMenu,
              {
                index: it.id,
              },
              // vue3如果传递了插槽那么就不可以再传递其它的内容，所有的内容都必须放在插槽里边
              {
                default: () => this.loop(it.children),
                title: () => [h(ElIcon, [h(Location)]), h("span", it.name)],
              }
            );
        return vNode;
      });

      return [
        () => (
          "template",
          {
            slot: "title",
          },
          [h("el-icon", [h(Location)]), h("span", ["Navigator One"])]
        ),

        // 单个菜单
        h(
          ElMenuItem,
          {
            props: {
              index: "1-4-1",
            },
          },
          ["item one"]
        ),
      ];
    },
  },
};
